<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" :width="800" @ok="handleSubmit">
    <a-spin :spinning="loading">
      <div class="jeecg-basic-table-form-container ">
        <a-form ref="formComponent" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :lg="12">
              <a-form-item name="name">
                <template #label><span title="机构名称">机构名称</span></template>
                <a-input placeholder="请输入机构名称" v-model:value="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="24">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
                <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-col>
        </a-form>
      </div>
      <BasicTable ref="tableRef" @register="registerTable" :rowSelection="rowSelection">
      </BasicTable>
    </a-spin>
  </BasicModal>
  
</template>

<script lang="ts">
import { reactive, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useListPage } from '/@/hooks/system/useListPage';
import { defHttp } from '/@/utils/http/axios';

export default {
  name: 'CloneMedicationShopModal',
  components: {
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  emits: ['register', 'success'],
  setup(_p, { emit }) {
    const columns: any = [
      { title: '机构名称', align: 'center', dataIndex: 'name' },
      { title: '机构地址', align: 'center', dataIndex: 'address' },
    ];
    const formComponent = ref();
    const formDisabled = ref(false);
    const title = ref('');
    const hospitalId = ref('');
    const loading = ref<boolean>(false);
    const queryParam = reactive<any>({});
    const labelCol = reactive({ xs: 24, sm: 4, xl: 6, xxl: 4 });
    const wrapperCol = reactive({ xs: 24, sm: 20 });

    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({ defaultFullscreen: false, confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
      title.value = '选择机构';
      hospitalId.value = data?.id;
      formDisabled.value = !data?.showFooter;
    });

    const list = (params) => defHttp.get({ url: '/nurse_hospital/nurseHospital/rootList', params });

    const { tableContext } = useListPage({
      designScope: 'tenant-template',
      tableProps: {
        api: list,
        columns,
        scroll: { y: 390 },
        rowKey: 'id',
        showActionColumn: false,
        useSearchForm: false,
        rowSelection: { type: 'radio' },
        beforeFetch: (params) => Object.assign(params, queryParam),
      },
    });
    const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

    async function handleSubmit() {
      if (rowSelection?.selectedRows.length === 0) {
        return;
      }
      loading.value = true;
      await defHttp
        .post({
          url: `/medication/medicationShop/clone?id=${rowSelection?.selectedRows[0]?.id}&cloneId=${hospitalId.value}`,
          params: {},
        })
        .finally(() => {
          loading.value = false;
        });
      emit('success', rowSelection?.selectedRows[0]);
      closeModal();
      searchReset();
    }

    function searchReset() {
      formComponent.value.resetFields();
      selectedRowKeys.value = [];
      reload();
    }

    return {
      registerModal,
      title,
      formDisabled,
      handleSubmit,
      registerTable,
      rowSelection,
      queryParam,
      labelCol,
      loading,
      wrapperCol,
      reload,
      searchReset,
      formComponent,
    };
  },
};
</script>

<style lang="less" scoped>
::deep(.ant-input-number) {
  width: 100%;
}
::deep(.ant-calendar-picker) {
  width: 100%;
}
</style>


